 <!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="BI system demo">
    <meta name="author" content="Louis">

    <script src="http://172.16.17.100:8081/jquery-3.3.1.min.js"></script>
    <link rel="stylesheet" href="http://172.16.17.100:8081/boostrap/css/bootstrap.min.css">

    <!-- Echart -->
    <script type="text/javascript" src="http://172.16.17.100:8081/echarts3.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="http://172.16.17.100:8081/echarts-wordcloud.js" charset="utf-8"></script>

    <title>测试</title>

    <style type="text/css">
        body,
        html {
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
        }

        #chart {
            width: 650px;
            height: 800px;
        }

        #bar {
            width: 200px;
            height: 600px;
        }


        p {
            margin-left: 5px;
            font-size: 14px;
        }
    </style>

</head>

<body>
    <div class="container">
        <div class="col-md-2">
            <div class="btn-group-vertical" role="group">

                <li class="btn btn-default" id="real_time" onclick="get_data(this)" active="true"> 实时热点 </li>
                <li class="btn btn-default" id="today" onclick="get_data(this)">今日热点</li>
                <li class="btn btn-default" id="seven_day" onclick="get_data(this)">七日热点</li>
                <li class="btn btn-default" id="people_care" onclick="get_data(this)">民生热点</li>
                <li class="btn btn-default" id="entertainment" onclick="get_data(this)">娱乐热点</li>
                <li class="btn btn-default" id="sport" onclick="get_data(this)">体育热点</li>
                <li class="btn btn-default" id="all" onclick="get_data(this)">全部</li>
            </div>
        </div>
        <div class="col-md-10">
            <div class="row"><div class="well"><h3 id="title">标题</h3></div></div>
            <div class="row">
                <div class="col-md-4">
                    <div id="bar"></div>
                </div>
                <div class="col-md-8">
                    <div id="chart"></div>
                </div>

            </div>
        </div>
    </div>





<script type="text/javascript">

function get_data(obj){
    $("#title").text($("#"+obj.id).text())
    var getDataURL = "/baidu_range"
    if (obj.id != "all"){
        getDataURL += "?type="+obj.id
    }
     $.ajax({
            url: getDataURL,
            useDefaultXhrHeader: false, //important, otherwise its not working
            type: "GET",
            //dataType: "json",
            success: function(response, opts) {

            var myChart = echarts.init(document.getElementById("chart"))

            //词云
            var datas = []
            //排行榜内容
            var html = '<ul class="list-group">'
            var max_value = 100
            var rate = 8
            response["datas"].forEach(function(val,index, arr){
                datas.push({
                    "name": val.keyword,
                    "value": max_value - parseInt(parseInt(val.range)*rate),
                })
                html += '<li class="list-group-item"><span class="badge">'+val.range+'</span>'+val.keyword+'</li>'
            })

            html += '</ul>'

            myChart.setOption({
                series: [{
                    type: "wordCloud",

                    shape: "pentagon",
                    left: "center",
                    top: "center",
                    width: "70%",
                    height: "80%",
                    right: null,
                    bottom: null,

                    sizeRange: [20, 60],

                    rotationRange: [-60, 60],
                    rotationStep: 10,

                    gridSize: 20,
                    drawOutOfBound: false,
                    textStyle: {
                        normal: {
                            fontFamily: "sans-serif",
                            fontWeight: "bold",
                            color: function () {
                                // Random color
                                return "rgb(" + [
                                    Math.round(Math.random() * 160),
                                    Math.round(Math.random() * 160),
                                    Math.round(Math.random() * 160)
                                ].join(",") + ")";
                            }
                        },
                        emphasis: {
                            shadowBlur: 6,
                            shadowColor: "#666",
                        }
                    },

                    data: datas
                }]
            });


            //排行榜

            $('#bar').empty()
            $('#bar').append(html)

        }
    })
}


</script>
</body>